import { defineStore } from 'pinia'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
//其中defineStore的第一个参数为该store的名称，
// 第二个参数为一个对象，包含了该store的state,getters和actions，
// state改为了函数形式，目的应该是像Vue2 options API中的data类似
// ，避免多个store中定义的属性相互受到影响。

//需要使用的时候直接导出就好了 例子
//下载 npm i pinia
// // 引入
// import useCounterStore from './store/counter'
// //使用
// const counter = useCounterStore()
//
// <template>
//   <h1>根组件---{{ counter.count }}</h1>
// </template>
//详情使用例子 https://www.bilibili.com/read/cv16804423/   https://www.jb51.net/article/255470.htm


// 当然可以。Pinia 是一个 Vue.js 状态管理库，它的核心思想是使用原生的 Vue 组件和 API 来实现状态管理。下面是 Pinia 中一些常见的内容：
//
//     Store：Store 是 Pinia 中最重要的概念之一，它类似于 Vuex 中的 state，在 Store 中可以定义应用程序的状态以及操作这些状态的方法。
//
//     Actions：Actions 类似于 Vuex 中的 actions，它们用于执行异步操作并提交 mutations。
//
//     Mutations：Mutations 用于修改 Store 中的数据，类似于 Vuex 中的 mutations。
//
//     Getters：Getters 类似于 Vuex 中的 getters，它们用于从 Store 中获取计算值。
//
//     Plugins：Plugins 可以在应用启动时注册到 Store 中，并在每个 mutation 被提交时执行自己的逻辑。
//
//     DevTools 插件：Pinia 提供了一个可以与浏览器开发工具集成的插件，可以方便地查看、调试和追踪 Store 的状态变化。
//
// 除了上述内容，Pinia 还提供了一些高级特性，例如模块化组织 Store、类型安全等等。


const counterStore = defineStore('counter', {
    state: () => {
        return {
            // 存储token
            token: "",
            userName: "", // 可选
        }
    },
    getters: {// 相当于vue里面的计算属性，可以缓存数据
        getToken() {
            return localStorage.getItem(SystemConstant.TOKEN_KEY) || "";//state.token ||
        }
    },
    //方法
    actions: { // 可以通过actions 方法，改变 state 里面的值。
        // 修改token，并将token存入localStorage
        setToken(state, token) {
            state.token = token;
            localStorage.setItem(SystemConstant.TOKEN_KEY, token);
            console.log('store、localstorage保存token成功！');
        },
        delToken(state) {
            state.token = "";
            localStorage.removeItem(SystemConstant.TOKEN_KEY);
        },
        // 可选
        setUserInfo(state, userName) {
            state.userName = userName;
        },

    },
})
//导出pinia
export default counterStore

//对比vuex
// state 相当于 data
// actions 相当于 methods
// getters 相当于 computed
// export const useLayoutStore = defineStore('layout', {
//     state: () => ({
//         const storedIsCollapse = localStorage.getItem('isCollapse');
//         return {
//             isCollapse: storedIsCollapse ? JSON.parse(storedIsCollapse) : false
//         };
//     }),
//     actions: {
//         toggleCollapse() {
//             this.isCollapse = !this.isCollapse
//         }
//     },

// })
export const useLayoutStore = defineStore('layout', {
    state: () => {
        // 尝试从 localStorage 中读取 isCollapse 的值，如果没有则使用默认值 false
        const storedIsCollapse = localStorage.getItem('isCollapse');
        const isMobile = false;
        const showMobileAside = false;
        return {
            isCollapse: storedIsCollapse ? JSON.parse(storedIsCollapse) : false,
            isMobile,
            showMobileAside
        };
    },
    actions: {
        toggleCollapse() {
            this.isCollapse = !this.isCollapse;
            localStorage.setItem('isCollapse', JSON.stringify(this.isCollapse));
        },
        toggleMobileAside() {
            this.showMobileAside = !this.showMobileAside
        },
        setMobile(isMobile) {
            this.isMobile = isMobile
        }
    }
});